<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04_具名(有具体名字的)插槽</title>
</head>
<!-- 
    具名插槽:有的时候组件里不止一个插槽,当我们需要按需修改某个插槽时,那就要给插槽取个名字了,这就是具名插槽
 -->

<body>
    <div id="app">
        <cpn>
            <h3 slot="left">我是被修改的左边的内容...</h3>
            <p slot="center">我是被修改的中间的内容...</p>
            <p slot="right">我是被修改的右边的内容...</p>
        </cpn>
    </div>
</body>
<script src="../vue.js"></script>

<template id="cpn">
    <div>
        <slot name="left">左边</slot>
        <slot name="center">中间</slot>
        <slot name="right">右边</slot>
        <slot>我是默认插槽里的内容</slot>
    </div>
</template>

<script>
    const vm = new Vue({
        el: '#app',
        components: {
            cpn: {
                template: '#cpn'
            }
        }
    })
</script>

</html>